<template>
  <div class="app-container home">
    <el-row class="el-row-flex">
      <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
        <el-form-item label="患者姓名" prop="patientName">
          <el-input v-model="queryParams.patientName" placeholder="请输入患者姓名" clearable
            @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item label="就诊序列号" prop="serialNumber">
          <el-input v-model="queryParams.serialNumber" placeholder="请输入就诊序列号" clearable
            @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item label="填报医生" prop="fillDoctor">
          <el-input v-model="queryParams.fillDoctor" placeholder="请输入填报医生" clearable
            @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item label="科室" prop="deptName">
          <el-input v-model="queryParams.deptName" placeholder="请输入科室" clearable @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item label="创建时间" prop="dateRange">
          <el-date-picker v-model="queryParams.dateRange" type="daterange" align="right" unlink-panels
            range-separator="到" :clearable="false" value-format="yyyy-MM-dd" format="yyyy-MM-dd"
            start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="上报状态" prop="status">
          <el-select v-model="queryParams.status" placeholder="请选择上报状态" clearable>
            <el-option v-for="dict in statusOptions" :key="dict.value" :label="dict.label" :value="dict.value" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </el-row>
    <el-row class="el-row-flex end">
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-row class="el-row-flex" v-loading="loading">
      <el-table :data="tableData" border style="width: 100%" ref="table" @sort-change="sortChange">
        <el-table-column prop="patientName" label="患者姓名" min-width="80">
          <template slot-scope="scope">{{ scope.row.patientName || '-' }}</template>
        </el-table-column>
        <el-table-column prop="serialNumber" label="就诊序列号" min-width="100">
          <template slot-scope="scope">{{ scope.row.serialNumber || '-' }}</template>
        </el-table-column>
        <el-table-column prop="deadDate" label="死亡日期" min-width="80">
          <template slot-scope="scope">{{ scope.row.deadDate || '-' }}</template>
        </el-table-column>
        <el-table-column prop="directCauseName" label="直接病因" min-width="80">
          <template slot-scope="scope">{{ scope.row.directCauseName || '-' }}</template>
        </el-table-column>
        <el-table-column prop="fillDoctor" label="填报医生" min-width="80">
          <template slot-scope="scope">{{ scope.row.fillDoctor || '-' }}</template>
        </el-table-column>
        <el-table-column prop="deptName" label="科室" min-width="60">
          <template slot-scope="scope">{{ scope.row.deptName || '-' }}</template>
        </el-table-column>
        <el-table-column prop="createDate" label="创建日期" min-width="80" sortable="custom">
          <template slot-scope="scope">{{ scope.row.createDate || '-' }}</template>
        </el-table-column>
        <el-table-column prop="status" label="上报状态" min-width="80">
          <template slot-scope="scope">{{ statusMap[scope.row.status] || '-' }}</template>
        </el-table-column>
        <el-table-column label="操作" width="170">
          <template slot-scope="scope">
            <el-button size="mini" @click="handleDetail(scope.$index, scope.row)">详情</el-button>
            <el-button size="mini" :loading="scope.row.eventLoading" type="primary"
              v-if="operatorMap[scope.row.operate]" @click="handleEvent(scope.$index, scope.row)">{{
                operatorMap[scope.row.operate] }}</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-row>
    <!-- <el-row class="el-row-flex end">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="queryParams.pageNum" :page-sizes="[10, 20, 50, 100]" :page-size="queryParams.pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </el-row> -->

  </div>
</template>

<script>
import { doEvent, getTodoList } from '@/api/record';
import { operatorMap, queryStatusOptions, statusMap } from '@/utils/enum';
import Storage from '@/utils/localStorage';
import { cloneDeep } from 'lodash';
import { dateRange, pickerOptions } from '../report/config';

const initQueryParams = {
  patientName: '',
  serialNumber: '',
  fillDoctor: '',
  deptName: '',
  dateRange: cloneDeep(dateRange),
  status: '',
  order: 'des',
  pageSize: 10,
  pageNum: 1
}


export default {
  name: "RecordTodo",
  data() {
    return {
      queryParams: cloneDeep(initQueryParams),
      pickerOptions: cloneDeep(pickerOptions),

      statusOptions: queryStatusOptions(),
      statusMap,
      operatorMap,
      showSearch: true,
      tableData: [],
      total: 0,
      loading: false,
      routeQuery: false, // 是否经过路由函数调用接口
      orderMap: {
        ascending: 'asc',
        descending: 'des'
      }
    };
  },
  beforeRouteEnter(to, from, next) {
    // 通过 `vm` 访问组件实例
    next(vm => {
      if (from.name === 'RecordDetail') { // 从详情页返回
        const { status, value } = Storage.get('queryParams');
        if (status === 0) {
          Object.assign(vm.queryParams, JSON.parse(value));
          vm.getList();
          vm.routeQuery = true;
        }
      }
    })
  },
  beforeRouteLeave(to, from, next) {
    // 跳转详情页保存查询参数12小时
    if (to.name === 'RecordDetail') {
      Storage.set('queryParams', JSON.stringify(this.queryParams), new Date().getTime() + 1000 * 60 * 60 * 12)
    } else {
      Storage.remove('queryParams');
    }
    next();
  },
  created() {
  },
  mounted() {
    if (!this.routeQuery) {
      this.getList();
    }
  },
  methods: {
    sortChange({ prop, order, column }) {
      if (!order) { return; }

      this.queryParams.order = this.orderMap[order];
      this.getList();
    },
    handleQuery() {
      this.getList();
    },
    resetQuery() {
      this.resetForm("queryForm");
      Object.assign(this.queryParams, cloneDeep(initQueryParams))
      this.handleQuery();
    },
    /** 获取列表 */
    async getList() {
      try {
        this.loading = true;
        let body = { ...this.queryParams };
        body.start_date = body.dateRange[0];
        body.end_date = body.dateRange[1];
        delete body.dateRange;

        // let query = {
        //   pageNum: body.pageNum,
        //   pageSize: body.pageSize
        // };
        delete body.pageNum;
        delete body.pageSize;

        const { data: list } = await getTodoList(body)
        this.loading = false;
        this.tableData = list.map(e => ({ ...e, eventLoading: false }));
        // this.total = total
      } catch (error) {
        this.loading = false
      }
    },
    handleDetail(index, row) {
      this.$router.push({ name: 'RecordDetail', query: { id: row.id, patientId: row.patientId, idCard: row.idCard, from: this.$route.path } })
      // this.$router.push({ path: `/record/detail/${row.id}` })
    },
    async handleEvent(index, row) {
      try {
        row.eventLoading = true

        await doEvent({
          id: row.id,
          patientId: row.patientId,
          serialNumber: row.serialNumber,
          operate: row.operate,
          cardNo: row.cardNo,
          idCard: row.idCard,
        })
        row.eventLoading = false
        this.$message.success(operatorMap[row.operate] + '成功')
        this.getList();
      } catch (error) {
        row.eventLoading = false
      }
    },
    handleSizeChange(val) {
      this.queryParams.pageSize = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.queryParams.pageNum = val
      this.getList()
    }
  },
};

</script>

<style lang="scss" scoped>
.app-container {

  .el-row-flex {
    display: flex;
    align-items: center;
    justify-content: flex-start;

    &.end {
      justify-content: flex-end;
    }

    &.column-flex {
      flex-direction: column;
    }

    .chart-type {
      align-items: flex-start;
      display: flex;
      justify-content: flex-start;
      width: 100%;

    }

    &:not(:first-child) {
      margin-top: 16px;
    }
  }
}
</style>
